<template>
  <div class="login-form">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px; width: 300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <h1 style="text-align: center">找回密码</h1>
      <!-- 用户名表单 -->
      <el-form-item prop="userName">
        <el-input
          v-model="ruleForm.userName"
          placeholder="用户名"
          @blur="validateUsername"
        />
        <div v-show="flagA" style="color: red; height: 8px">用户名格式错误</div>
      </el-form-item>
      <el-form-item prop="email">
        <el-input
          v-model="ruleForm.email"
          placeholder="邮箱"
          @blur="validateEmail"
        />
        <div v-show="flagC" style="color: red; height: 8px">邮箱格式错误</div>
      </el-form-item>
      <!-- 密码表单 -->
      <el-form-item prop="newPassword">
        <el-input
          v-model="ruleForm.newPassword"
          placeholder="输入密码"
          show-password
          type="password"
          @blur="validatePassword"
        />
        <div v-show="flagB" style="color: red; height: 8px">密码格式错误</div>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="ruleForm.code"
          placeholder="输入验证码"
          style="width: 200px"
          @blur="validateCode"
        />
        <el-button
          type="primary"
          style="width: 80px; height: 30px; margin-left: 20px"
          @click="sendCode"
          >发送验证码</el-button
        >
        <div v-show="flagB" style="color: red; height: 8px">密码格式错误</div>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="findPwd"
          style="width: 300px"
          type="primary"
          >立即找回</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { findPw, getCode } from "../api/login";
import { ElMessage, ElMessageBox } from "element-plus";
import {useRouter} from 'vue-router'

//路由对象
const router = useRouter()

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  userName: "",
  newPassword: "",
  email: "",
  code: "",
});

//校验用户名
let flagA = ref(false);
const validateUsername = () => {
  var regx = /^[a-zA-Z][a-zA-Z0-9_-]{5,}$/;
  flagA.value = !regx.test(ruleForm.userName);
};

//校验密码
let flagB = ref(false);
const validatePassword = () => {
  var regx = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
  flagB.value = !regx.test(ruleForm.newPassword);
};
//校验邮箱
let flagC = ref(false);
const validateEmail = () => {
  var regx = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  flagC.value = !regx.test(ruleForm.email);
};

//发送验证码
const sendCode = async () => {
  const { data } = await getCode(ruleForm.userName, ruleForm.email);
  if (data.code == 200) {
    ElMessage.success("获取验证码成功");
  }
};

//找回密码
const findPwd = async()=>{
  const {data} = await findPw(ruleForm)
  if(data.code == 200){
    ElMessage("找回密码成功")
    router.push("/login")
  }
}
</script>

<style scoped>
.login-form {
  width: 500px;
  height: 500px;
  margin: 200px auto;
}

a {
  color: black;
  font-size: 14px;
  text-decoration: none;
  margin-left: 160px;
}
</style>